<template>
  <div>
    <div class="title1">
      <img width="14" height="14" src="../../assets/img/bg-warning.png" /> <span>评论涉及违规图文时将被自动删除</span>
    </div>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="(item, key) in list" :key="key" @click="goDetails(item)">
          <div class="content1">
            <div class="head1">
              <img
                v-if="item.userHeadPortrait != null"
                width="40"
                height="40"
                :src="item.userHeadPortrait | imgPaths"
              />
              <img v-else src="@/assets/img/defaultAvatar.png" width="40" height="40" alt="" class="back" />

              <div>
                <p class="col-333333 font-15 font-bold-400 titlestyle">{{ item.userInfoName }}</p>
                <van-rate v-model="item.score" :size="14" color="#ffd21e" void-icon="star" void-color="#eee" readonly />
              </div>
            </div>
            <div class="content2">
              <p class="col-333333 font-15 font-bold-400">服务内容：{{ item.recordName }}</p>

              <p>
                {{ item.content }}
              </p>
              <div>
                <img
                  v-if="item.imgs[0] !== ''"
                  width="72"
                  height="72"
                  v-for="(itm, index) in item.imgs"
                  :key="index"
                  :src="itm | imgPaths"
                  alt=""
                />
              </div>
              <button @click="deleteItem(item.id)">删除</button>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { Toast, Dialog, PullRefresh, List, Overlay, Tab, Tabs, Rate } from 'vant'
import { getHandle, postHandle } from '@/api'
import { getValue } from '../../utils/auth'
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Rate.name]: Rate,
    [PullRefresh.name]: PullRefresh,
    [Overlay.name]: Overlay,
    [Dialog.name]: Dialog,
    [Toast.name]: Toast,

    [List.name]: List
  },
  data() {
    return {
      refreshing: false,
      list: [],
      loading: false,
      finished: false,
      params: {
        page: 1,
        perPage: 10,
        shield: 0,
        userId: getValue('loginUserId')
      }
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 卡片列表
    onRefresh() {
      this.params.page = 1
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    onSearch() {
      this.params.page = 1
      this.list = []
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },

    deleteItem(id) {
      Dialog.confirm({
        title: '删除确认',
        message: '是否删除评论?',
        confirmButtonColor: '#37b5b5'
      })
        .then(() => {
          // on confirm
          postHandle(`/agri/api/common/evaluateInfo/delete/${id}`).then(res => {
            console.log(res)
            if (res.status === 0) {
              this.list = []
              this.onRefresh()
            } else {
              Toast({
                message: res.msg,
                position: 'bottom'
              })
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    onLoad() {
      getHandle('/agri/api/common/evaluateInfo/queryListPage', this.params).then(res => {
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }

        res.data.rows.map((item, index) => {
          const objs = {
            content: '',
            userHeadPortrait: '',
            score: '',
            imgs: [],
            recordName: '',
            id: ''
          }
          for (var key in item) {
            objs.content = item.content
            objs.userHeadPortrait = item.userHeadPortrait

            objs.score = item.score
            objs.id = item.id

            objs.recordName = item.recordName
            objs.userInfoName = item.userInfoName
            objs.imgs = item.imgs.split(',')
          }
          this.list.push(objs)
        })
        this.visible = this.list.length
        this.loading = false

        if (this.list.length >= res.data.count) {
          this.finished = true
        } else {
          this.params.page = this.params.page + 1
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.title1 {
  padding: 6px 15px;
  display: flex;
  align-items: center;
  background-color: #fdead9;
  > img {
    margin-right: 5px;
  }
  > span {
    font-size: 12px;
    font-weight: 400;
    color: #333333;
  }
}
::v-deep .van-tabs__line {
  display: none;
}
::v-deep .van-tab {
  font-size: 14px;
  color: #666666;
}
::v-deep .van-tab--active {
  color: #37b5b5;
}
.content1 {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 20px 15px;
  .head1 {
    display: flex;
    align-items: center;
    > img {
      margin-right: 10px;
    }
    > div {
      > p {
        margin-bottom: 4px;
      }
    }
  }
  .content2 {
    > p {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 24px;
      margin: 10px 0;
    }
    > div {
      > img {
        margin-right: 12px;
      }
    }
    > button {
      margin-left: 82%;
      width: 50px;
      height: 24px;
      border-radius: 2px;
      border: 1px solid #37b5b5;
      background-color: #fff;
      color: #37b5b5;
      margin-top: 12px;
    }
  }
}
.titlestyle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
